<!--
 * @FileDescription: 添加计划组件
 * @Author: cjw
 * @Date: 2022/2/16 16:15
 -->
<template>
<div>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :destroy-on-close="close_modal_destroy"
    :close-on-click-modal="close_modal"
    @close="handleCancel"
    width="800px"
  >
    <el-form ref="ruleForm" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="标签名称" required>
        <el-input v-model="form.tagName"></el-input>
      </el-form-item>
      <el-form-item label="打卡时间" required>
        <el-checkbox-group v-model="weekList">
          <el-checkbox :label="week" v-for="week in weeks" :key="week"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="计划时间" required>
        <el-date-picker
          v-model="selectTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="计划内容" prop="content">
        <el-input type="textarea" v-model="form.content"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即发布</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
</template>

<script>
import {addPlan} from "@/api/plan";

export default {
  name: "addPlan",
  data() {
    var validateTime = (rule, value, callback) => {
      if (this.form.beginTime == undefined || this.form.endTime == undefined) {
        callback(new Error('请输入计划时间'));
      } else {
        callback();
      }
    };
    return {
      title: '发布你的计划',
      visible: false,
      close_modal_destroy: true,
      close_modal: false,
      weekList: [],
      weeks: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
      form: {
        tagName: undefined,
        content: undefined,
        beginTime: undefined,
        endTime: undefined,
        days: undefined
      },
      formNoticy: {
        tagName: '标签不能为空',
        content: '内容不能为空',
        beginTime: '开始时间不能为空',
        endTime: '结束时间不能为空',
        days: '请选择星期'
      },
      rules: {
        endTime: [
          { required: true,validator: validateTime, trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填入内容', trigger: 'change' }
        ]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      selectTime: ''
    }
  },
  methods: {
    add() {
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.selectTime = undefined
      this.weekList = []
      this.form = {
        tagId: undefined,
        content: undefined,
        beginTime: undefined,
        endTime: undefined,
        days: undefined
      }
    },
    handleCancel() {
      this.close()
    },
    onSubmit() {
      this.form.beginTime = this.selectTime[0]
      this.form.endTime = this.selectTime[1]
      for (var i=0;i<this.weekList.length-1;i++) {
        this.form.days = this.weekList[i] + ","
      }
      this.form.days += this.weekList[this.weekList.length-1]
      for (name in this.form) {
        if (this.form[name] == undefined || this.form[name] == '') {
          this.$message.error(this.formNoticy[name])
          return false
        }
      }

      addPlan(this.form).then(res => {
        if (res.body.data) {
          this.$message.success("成功发布")
          this.$emit('ok')
          this.close()
        }
      })
      return true
    }
  }
}
</script>

<style scoped>

</style>
